<template>
    <Form ref="form" :model="form" :rules="ruleValidate" :label-width="120">
        <FormItem label="值班项名称" prop="watchlist_name.zh">
            <Input v-model="form.watchlist_name.zh" placeholder="输入值班项名称"></Input>
        </FormItem>
        <FormItem label="选择表单项" prop="fromgroup">
            <Select v-model="form.fromgroup" placeholder="请选择表单项">
                <Option v-for="item in group" :value="item.fromgroup" :key="item.fromgroup">{{ item.fromgroup_name }}</Option>
            </Select>
        </FormItem>
        <FormItem label="排序" prop="sort">
            <Input v-model="form.sort" placeholder="输入排序"></Input>
        </FormItem>
        <FormItem label="参与班级考核分" prop="classcheck">
            <RadioGroup v-model="form.classcheck">
                <Radio :label="1">参与</Radio>
                <Radio :label="2">不参与</Radio>
            </RadioGroup>
        </FormItem>
        <FormItem label="参与学生考核分" prop="studentcheck">
            <RadioGroup v-model="form.studentcheck">
                <Radio :label="1">参与</Radio>
                <Radio :label="2">不参与</Radio>
            </RadioGroup>
        </FormItem>
        <FormItem label="参与班主任考核分" prop="teacherscheck">
            <RadioGroup v-model="form.teacherscheck">
                <Radio :label="1">参与</Radio>
                <Radio :label="2">不参与</Radio>
            </RadioGroup>
        </FormItem>
        <FormItem label="是否有值班老师" prop="watchlist_type">
            <RadioGroup v-model="form.watchlist_type">
                <Radio :label="1">是</Radio>
                <Radio :label="2">否</Radio>
            </RadioGroup>
        </FormItem>
        <FormItem label="是否需要上传图片" prop="upload">
            <RadioGroup v-model="form.upload">
                <Radio :label="1">不需要</Radio>
                <Radio :label="2">需要</Radio>
            </RadioGroup>
        </FormItem>
        <FormItem>
            <Button type="primary" :loading="promptBox" @click="handleSubmit('form')">{{buttonTit}}</Button>
        </FormItem>
    </Form>
</template>

<script>
export default {
    props:['dataId'],
    data () {
        return {
            form:{
                watchlist_name: {
                    zh:null,
                    en:null,
                    mn:null,
                },
                sort:'0',
                upload: '1',
                classcheck:'2',
                studentcheck:'2',
                teacherscheck:'2',
                fromgroup:null,
                watchlist_type: '2',
            },
            addUrl:'api/watchlist/v1/watchlistclass/add',
            editUrl:'api/watchlist/v1/watchlistclass/edit/'+this.dataId,
            selUrl:'api/watchlist/v1/watchlistclass/find/'+this.dataId,
            groupUrl:'api/moral/v1/get/clatioaan/list',
            group:Array,
            buttonTit:null,
            promptBox:false,
            ruleValidate: {
                'watchlist_name.zh':[
                    { required: true, message: '请输入值班项名称', trigger: 'blur' }
                ],
                sort:[
                    { required: true, message: '请输入排序', trigger: 'blur' }
                ],
                fromgroup: [
                    { required: true, message: '请选择套餐', trigger: 'change' }
                ],
                classcheck: [
                    { required: true,type:'number', message: '请选是否参与班级考核', trigger: 'change' }
                ],
                studentcheck: [
                    { required: true,type:'number', message: '请选择是否参与学生考核', trigger: 'change' }
                ],
                watchlist_type: [
                    { required: true,type:'number', message: '请选择是否有值班老师', trigger: 'change' }
                ],
                teacherscheck: [
                    { required: true,type:'number', message: '请选择是否参与老师考核', trigger: 'change' }
                ],
            },
        }
    },
    methods: {

        // ==================================================
        // 表单验证
        // ==================================================
        handleSubmit (name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.submit()
                } else {
                    this.$Message.error('请检查填写内容');
                }
            })
        },

        // ==================================================
        // 执行添加
        // ==================================================
        submit () {
            this.promptBox = true
            if(this.dataId !=null){
                this.$http.put(this.editUrl,this.form).then(val=>{
                    this.promptBox = false;
                    this.$emit('requery',true)
                 }).catch(err=>{
                    if(err.code && err.code==422) {
                        this.$Message.error(err.message);
                    }
                })
            }else{
                this.$http.post(this.addUrl,this.form).then(val=>{
                    this.promptBox = false;
                    this.$emit('requery',true)
                }).catch(err=>{
                    if(err.code && err.code==422) {
                        this.$Message.error(err.message);
                    }
                })
            }
            
        },

        // ==================================================
        // 查询表单项
        // ==================================================
        groupData(){
            this.$http.get(this.groupUrl).then(val => {
                this.group = JSON.parse(JSON.stringify(val.data))
                console.log(this.group)
            }).catch(err=>{
                if(err.code && err.code==422) {
                    this.$Message.error(err.message);
                }
            })
        },
        selData(){
            this.$http.get(this.selUrl).then(val=>{
                let singleData = JSON.parse(JSON.stringify(val.data))
                this.form.watchlist_name = singleData.watchlist_name
                this.form.sort = singleData.sort
                this.form.classcheck = singleData.classcheck
                this.form.studentcheck = singleData.studentcheck
                this.form.teacherscheck = singleData.teacherscheck
                this.form.fromgroup = singleData.fromgroup
                this.form.upload = singleData.upload
                this.form.watchlist_type = singleData.watchlist_type
            }).catch(err=>{
                if(err.code && err.code==422) {
                    this.$Message.error(err.message);
                }
            })
        },
    },
    mounted(){
        this.groupData()
        if(this.dataId !=null){
            this.buttonTit ='修改'
            this.selData()
        }else{
            this.buttonTit ='添加'
        }
    },
}
</script>